<template>
	<div class="citysort">
		<h2>字母排序</h2>
		<ul>
			<li v-for="(value,key) in cities" :key="key">{{key}}</li>
		</ul>
	</div>
</template>

<script>
	export default{
		props:["cities"]
		/*data(){
			return{
				sortlist:[
					{
						id:1,
						main:"A"
					},
					{
						id:2,
						main:"B"
					},
					{
						id:3,
						main:"C"
					},
					{
						id:4,
						main:"D"
					},
					{
						id:5,
						main:"E"
					},
					{
						id:6,
						main:"F"
					},
					{
						id:7,
						main:"G"
					},
					{
						id:8,
						main:"H"
					},
					{
						id:9,
						main:"J"
					},
					{
						id:10,
						main:"K"
					},
					{
						id:11,
						main:"L"
					},
					{
						id:12,
						main:"M"
					},
					{
						id:13,
						main:"N"
					},
					{
						id:14,
						main:"P"
					},
					{
						id:15,
						main:"Q"
					},
					{
						id:16,
						main:"R"
					},
					{
						id:17,
						main:"S"
					},
					{
						id:18,
						main:"T"
					},
					{
						id:19,
						main:"W"
					},
					{
						id:20,
						main:"X"
					},
					{
						id:21,
						main:"Y"
					},
					{
						id:22,
						main:"Z"
					}
				]
			}
		}*/
	}
</script>

<style scoped>
	.citysort h2{
		background: #f5f5f5;
		font-size: .12rem;
    	padding: .12rem .15rem;
	}
	.citysort ul{
		width: 100%;
		height: 1.8rem;
		padding: .15rem 0;
	}
	.citysort ul li{
		width: 16.66%;
	    height: .45rem;
	    line-height: .45rem;
	    font-size: .14rem;
	    text-align: center;
	    float: left;
	    color: #212121;
	}
</style>